<template>
  <div>
    <table>
      <MyTr v-for="(item, index) in goodsArr" :key="index" :obj="item"></MyTr>
    </table>
    <p>All Number: {{ total }}</p>
    <hr />

    <p>商品清单如下：</p>
    <div v-for="(item, index) in foods" :key="index">
      {{ item.shopName }}{{ item.price }}元/份
    </div>
    <p>请选择购买数量:</p>
    <MyFoods
      :foods="foods"
      @add-event="handleAdd"
      @reduce-event="handleReduce"
    ></MyFoods>
    <p>总价为：{{ sum }}</p>
    <br />
    <hr />
    <br />
    <table border="1" width="700" style="border-collapse: collapse">
      <caption>
        购物车
      </caption>
      <thead>
        <tr>
          <th><input type="checkbox" v-model="all" /> <span>全选</span></th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>总价</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <MyTbody
          v-for="(item, index) in goodList"
          :key="index"
          :item="item"
          @del-event="handleDel"
          @change-event="handleChange"
          @red-event="handleRed"
          @add-event="changeAdd"
        ></MyTbody>
      </tbody>
      <tfoot>
        <tr>
          <td>合计:</td>
          <td colspan="5">
            {{ sumTotal }}
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
import MyTr from "./components/my-tr.vue";
import MyFoods from "./components/my-foods.vue";
import MyTbody from "./components/my-tbody.vue";
export default {
  name: "App",
  components: {
    MyTr,
    MyFoods,
    MyTbody,
  },
  props: {},
  data() {
    return {
      goodsArr: [
        {
          count: 0,
          goodsName: "Watermelon",
        },
        {
          count: 0,
          goodsName: "Banana",
        },
        {
          count: 0,
          goodsName: "Orange",
        },
        {
          count: 0,
          goodsName: "Pineapple",
        },
        {
          count: 0,
          goodsName: "Strawberry",
        },
      ],
      foods: [
        {
          shopName: "可比克薯片",
          price: 5.5,
          count: 0,
        },
        {
          shopName: "草莓酱",
          price: 3.5,
          count: 0,
        },
        {
          shopName: "红烧肉",
          price: 55,
          count: 0,
        },
        {
          shopName: "方便面",
          price: 12,
          count: 0,
        },
      ],
      goodList: [
        {
          name: "诸葛亮",
          price: 1000,
          num: 1,
          checked: false,
        },
        {
          name: "蔡文姬",
          price: 1500,
          num: 1,
          checked: false,
        },
        {
          name: "妲己",
          price: 2000,
          num: 1,
          checked: false,
        },
        {
          name: "鲁班",
          price: 2200,
          num: 1,
          checked: false,
        },
      ],
    };
  },
  computed: {
    total() {
      return this.goodsArr.reduce((prev, item) => prev + item.count, 0);
    },
    sum() {
      return this.foods.reduce(
        (prev, item) => prev + item.price * item.count,
        0
      );
    },
    all: {
      get() {
        return this.goodList.every((item) => item.checked === true);
      },
      set(value) {
        this.goodList.forEach((item) => (item.checked = value));
      },
    },
    sumTotal() {
      return this.goodList.filter(item=>item.checked===true).reduce(
        (prev, item) => prev + item.price * item.num,
        0
      );
    },
  },
  watch: {},
  created() {},
  methods: {
    handleAdd(index) {
      this.foods[index].count++;
    },
    handleReduce(index) {
      this.foods[index].count--;
    },
    handleDel(name) {
      const index = this.goodList.findIndex((item) => item.name === name);
      //  console.log(index,name)
      this.goodList.splice(index, 1);
    },
    handleChange(name) {
      const obj = this.goodList.find((item) => item.name === name);
      obj.checked = !obj.checked;
    },
    handleRed(name) {
      const index = this.goodList.findIndex((item) => item.name === name);
      this.goodList[index].num--;
    },
    changeAdd(name) {
      const index = this.goodList.findIndex((item) => item.name === name);
      this.goodList[index].num++;
    },
  },
};
</script>

<style scoped></style>
